<template>
  <div class="audition150">
    <p>1. 注册事件</p>
    <code class="code">
      <span class="color5">var</span> <span class="color2">myEvent</span> = new <span class="color">CustomEvent</span>('eventType', eventInit)
    </code>
    <p>eventType表示自定义事件的名称，比如<span class="color">'myClick'</span></p>
    <p>eventInit是一个可选对象参数，常用字段有：</p>
    <p><span class="color">"detail"</span>：可选的任意类型的值，默认为null</p>
    <p><span class="color">"bubbles"</span>：布尔值，表示事件是否冒泡，默认false，表示不冒泡</p>
    <p><span class="color">"cancelable"</span>：布尔值，表示事件是否可以取消</p>
    <p>2. 监听事件</p>
    <code class="code">
      window.<span class="color3">addEventListener</span>('eventType', function (e) {...})
    </code>
    <p>3. 触发事件</p>
    <code class="code">
      window.<span class="color1">dispatchEvent</span>(myEvent)
    </code>
    <hr>
    <p>完整示例：</p>
    <code class="code">
      <span class="color3">var</span> myEvent <span class="color">= new</span> <span class="color3">CustomEvent</span>('myClick', {<br />
        <span class="indient">detail: {</span><br />
          <span class="indient2">obj: {</span><br />
            <span class="indient3">name: 'dilireba',</span><br />
            <span class="indient3">age: 18</span><br />
          <span class="indient2">}</span><br />
        <span class="indient">},</span><br />
        <span class="indient">bubbles: false,</span><br />
        <span class="indient">cancelable: true</span><br />
      })<br />
      window.addEventListener('myClick', <span class="color3">function</span>(e) {<br />
        <span class="indient"><span class="color3">var</span> o <span class="color">=</span> e.detail.obj</span><br />
        <span class="indient">console.log(`我是${o.name}，我今年${o.age}岁了.`)</span><br />
      })<br />
      window.dispatchEvent(myEvent)
    </code>
  </div>
</template>

<script>
export default {
  name: 'Audition150'
}
</script>

<style>

</style>